<% image_height ||= nil %>
<% image_width ||= theme_setting('product_listing_image_width') %>
<% selected_variant ||= product.first_or_default_variant(current_currency) %>

<div class="swiper-slide w-full">
  <div
    class="product-card flex h-full flex-col w-full gap-2 relative"
    data-controller="plp-variant-picker"
    id="product-card-<%= product&.id %>">
    <%= link_to spree.product_path(product), id: "product-#{product&.id}", class: "group w-full flex flex-col", data: { turbo_frame: "_top", "plp-variant-picker-target": "link" } do %>
      <div
        class="mb-3 relative w-full product-card-featured-image"
        <% if image_height %>
        style="min-height: <%= image_height %>px;"
        <% end %>>
        <div class="overflow-hidden relative">
          <div data-plp-variant-picker-target="featuredImageContainer" class="h-full">
            <%= render 'spree/products/featured_image',
              object: product,
              height: image_height,
              width: image_width %>
          </div>
        </div>
        <%= render 'spree/products/label', product: product %>
      </div>
      <div class="product-card-inner">
        <% if product.brand_name.present? %>
          <h3 class="text-xs font-semibold uppercase inline-block product-card-brand">
            <%= product.brand_name %>
          </h3>
        <% end %>
        <h3 class="line-clamp-1 product-card-title">
          <% if product %>
            <%= product.name %>
          <% else %>
            <div class="grid grid-cols-3 gap-4">
              <div class="h-5 bg-accent rounded-sm col-span-2"></div>
            </div>
          <% end %>
        </h3>

        <% if product %>
          <div data-plp-variant-picker-target="priceContainer">
            <%= render 'spree/products/price',
              product: product,
              selected_variant: selected_variant,
              use_variant: false,
              price_class: "mt-2 font-light product-card-price" %>
          </div>
        <% else %>
          <div class="mt-2 grid grid-cols-3 gap-4">
            <div class="h-7 bg-accent rounded-sm col-span-1"></div>
          </div>
        <% end %>
      </div>
    <% end %>
    <div class="absolute right-1 top-1 z-10" data-plp-variant-picker-target="addToWishlist">
      <%= render 'spree/products/add_to_wishlist', variant: product.first_or_default_variant(current_currency) if product %>
    </div>
    <%= render 'spree/products/color_swatches', product: product if product && (defined?(show_variant_picker) ? show_variant_picker : true) %>
  </div>
</div>
